<template>
    <div class="container details-container">
        <el-tabs
            class="details-tabs"
            v-model="activeName"
            @tab-click="changeTab">
            <el-tab-pane
                lazy
                label="基本信息"
                name="base" />
            <el-tab-pane
                lazy
                label="平台业务数据"
                name="platform" />
                <!-- <el-tab-pane
                lazy
                label="学业信息"
                name="school" />
            <el-tab-pane
                lazy
                label="消费信息"
                name="consumption" />
            <el-tab-pane
                lazy
                label="娱乐信息"
                name="entertainment" /> -->
        </el-tabs>
        <div class="tabs-content">
            <detail-base
                v-show="activeName == 'base'"
                ref="base" />
            <detail-platform
                v-show="activeName == 'platform'"
                ref="platform" />
        </div>
    </div>
</template>

<script>
import detailBase from '@/components/student-message/details-base';
import detailPlatform from '@/components/student-message/details-platform';
export default {
    components: { detailBase, detailPlatform },
    data() {
        return {
            authResult: {},
            activeName: '',
            breadcrumbList: [
                {
                    title: "学生信息管理",
                },
                {
                    title: "信息列表",
                    name: 'list',
                },
                {
                    title: '详细信息'
                }
            ],
        };
    },
    methods: {
        changeTab(tab) {
            this.$refs[this.activeName].init();
            this.$router.replace({
                query: Object.assign({}, this.$route.query, { activeName: this.activeName })
            });
        }
    },
    created() {
        this.$store.commit('SET_HEADER', this.breadcrumbList);
        this.authResult = this.$route.meta.authResult;
        this.activeName = this.$route.query.activeName ? this.$route.query.activeName : 'base';
    },
    mounted() {
        this.$refs[this.activeName].init();
    }
};

</script>

<style lang="less" scoped>
    .container {
      display: flex;
      flex-direction: column;
    }
    .header {
      font-size: 20px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.85);
      line-height: 28px;
      background: #fff;
      padding: 10px 32px 40px;
    }
    .details-tabs {
      width: 100%;
    }
    .tabs-content {
      flex: 1;
      position: relative;
    }
</style>
<style lang="less">
    .details-tabs {
      .el-tabs__nav-wrap::after {
        height: 1px;
        background-color: rgba(0,0,0,.1);
      }
      .el-tabs__header {
        margin-bottom: 1px !important;
      }
      .el-tabs__nav-wrap {
        padding: 0 32px !important;
        background: #fff;
      }
    }
    .details-container {
      .el-card {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1) !important;
      }
    }
</style>